<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view class="wallet_header flex flex-align">
			<view class="fanhui" @click='go_back'><tui-icon name="back" :size="24" color="#000" ></tui-icon></view>
			<view class="title">{{type==1?'我的钱包':'我的积分'}}</view>
		</view>
		<!-- #endif -->
		
		<view class="bg_header">
			<view class="wallet ">
				<view class="list">
					<view class="wenben">{{type==1?'我的钱包':'我的积分'}}</view>
					<view class="price">{{type==1?datas.balance1:datas.balance2}}</view>
				</view>
				<view class="flex flex-center" v-if="type==1">
					<!-- <view class="btn" @click="go_url('/pages/wallet/transfer?type=2')" style="margin-right: 15rpx;">转账</view> -->
					<view class="btn hei" @click="go_url('/pages/wallet/tixian')" style="margin:0 auto;">提现</view>
				</view>
				<view class="flex flex-align mingxi">
					{{type==1?'余额':'积分'}}明细 <tui-icon name="arrowright" :size="20" color="#4d4d4d" ></tui-icon>
				</view>
			</view>
		</view>
		<view class="yue_list" v-if='dataList.length!=0'>
			<view class="list flex flex-align flex-bt" v-for="(item,index) in dataList" :key="index">
				<view class="left">
					<view class="title">{{item.content}}</view>
					<view class="time uni-font24 uni-text-gray">{{item.created_at}}</view>
				</view>
				<view class="right " :class="item.price>0?'red':'tui-green'">{{item.price}}</view>
			</view>
		</view>
		<view class="empty-box" v-if='dataList.length==0'>
			<image src="https://firework.cyx.zzcyx1688.cn/web/static/noCart.png" mode=""></image>
			<view class="uni-text-gray">暂无相关数据</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas:'',
				type:'',
				page:1,
				dataList:[]
			}
		},
		onLoad(e) {
			let that = this
			this.type=e.type
			uni.setNavigationBarTitle({
				title: e.type==1?'我的钱包':'我的积分'
			})
		},
		onShow() {
			this.page=1
			this.dataList = []
			this.getData()
			this.getList()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			go_url(e){
				console.log(e)
				let that = this
				that.tui.href(e)
			},
			go_back(){
				console.log(11)
				uni.navigateBack()
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "get", {}, false, false, true).then((res) => {
				
					that.datas = res.data.info
				}).catch((res) => {
					
				})
			},
			getList(){
				let that = this
				that.tui.request("api.auth.nutrition/balanceList", "get", {page:that.page,type:that.type}, false, false, true).then((res) => {
				
					that.dataList = that.dataList.concat(res.data.list)
				}).catch((res) => {
					
				})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f8f8f8;}
	.wallet_header{position: fixed;top: 0;left: 0;width: 100%;background: url('') no-repeat;background-size: 100%;padding: 60rpx 20rpx 30rpx;
		.title{text-align: center;margin-left: -60rpx;width: 100%;}
		.fanhui{position: relative;z-index: 222;}
	}
	.bg_header{height: 680rpx;background:url('') no-repeat;background-size: 100% 100%;padding: 180rpx 30rpx 0rpx;border-radius: 10rpx;
		.wallet{background: rgba(255, 255, 255, .5);flex-wrap: wrap;box-sizing: border-box;
			.list{padding: 60rpx 0;box-sizing: border-box;text-align: center;
				.price{font-weight: bold;font-size: 34rpx;margin-top: 20rpx;}
			}
			.btn{width: 250rpx;border: 1px solid #999;margin: 30rpx auto;color: #777;height: 80rpx;line-height:80rpx;text-align: center;}
			.mingxi{border-top: 1px solid #EEE;height: 100rpx;padding-left: 30rpx;margin-top: 60rpx;font-size: 24rpx;color: #4d4d4d;}
		}
	}
	/* #ifdef MP */
	.bg_header{
		height: 540rpx;
		padding: 90rpx 30rpx 0rpx;
	}
	/* #endif */
	.yue_list{background: #fff;padding:0 30rpx 30rpx;
		.list{padding: 30rpx 0;border-bottom: 1px solid #eee;
			.left{
				.title{margin-bottom: 10rpx;}
			}
		}
	}
	.red{color: #fb5252;}
	.tui-green{color: seagreen;}
</style>